<template>
	<view class="page-box">
		<view class="order" v-for="(res, rindex) in orderList" :key="rindex">
			<view class="top">
				<view class="left">
					<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
					<view class="store">{{ res.store_name }}</view>
					<u-icon name="arrow-right" color="rgb(203,203,203)" :size="30"></u-icon>
				</view>
				<view class="right">{{ getStatusText(res.status) }}</view>
			</view>
			<view class="item" v-for="(item, index) in res.subs" :key="item.id" 
			@click="gotoOrderDetails(res)">
				<view class="left"><image :src="photo_base_url + item.goods_cover" mode="aspectFill"></image></view>
				<view class="content">
					<view class="title u-line-2">{{ item.goods_name }}</view>
					<view class="type">{{ item.goods_option_title }}</view>
				</view>
				<view class="right">
					<view class="price">
						￥{{ priceInt(fenZhuanYuan(item.sell_price)) }}
						<text class="decimal">.{{ priceDecimal(fenZhuanYuan(item.sell_price)) }}</text>
					</view>
					<view class="number">x{{ item.total }}</view>
				</view>
			</view>
			<view class="tips-table" v-for="(tips,tindex) in res.tips_list" :key="tindex">
				<view class="title">{{tips.title}}</view>
				<view class="remark">{{tips.remark}}</view>
				<view class="status">{{tips.status}}</view>
			</view>
			<view class="total">
				共{{ totalNum(res.subs) }}件商品 合计:
				<text>
					￥{{ priceInt(fenZhuanYuan(res.original_total_price)) }}.
					<text class="decimal">{{ priceDecimal(fenZhuanYuan(res.original_total_price)) }}</text>
				</text>
			</view>
			<view class="total">
				实付:
				<text class="total-price">
					￥{{ priceInt(fenZhuanYuan(res.total_price)) }}.
					<text class="decimal">{{ priceDecimal(fenZhuanYuan(res.total_price)) }}</text>
				</text>
			</view>
			<view class="bottom">
				<view class="more">
					<!-- 更多 -->
				</view>
				<view class="btns">
					<view class="btn" v-if="res.is_express" @click="openLogistics(res)">查看物流</view>
					<view class="btn" v-if="res.status == 1 || res.status == 2" @click="gotoCloseOrder(res.id)">取消订单</view>
					<view class="btn primary" 
					@click="gotoNext(res.id,res.status)"
					v-if="res.is_show_primary"
					>
					{{getNextStatusText(res.status)}}
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
		<u-popup v-model="logisticsShow" mode="bottom" height="1160rpx" safe-area-inset-bottom closeable>
			<view class="logistics-box">
				<view class="title">
					{{logisticsOrderNo}} 物流信息
				</view>
				<view class="con">
					<order-logistics ref="orderLogistics"></order-logistics>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import orderLogistics from './order_logistics.vue'
export default {
	name:'member-order-list-box',
	components:{
		orderLogistics
	},
	data() {
		return {
			orderList:[],
			orderPage:0,
			orderEnd:false,
			logisticsShow:false,
			logisticsOrderNo:'',
			photo_base_url:'',
			loadStatus: 'loading',
			tmpIdx: 0,
			next_status_text: [],
			status_text: [],
		};
	},
	computed: {
		// 价格小数
		priceDecimal() {
			return val => {
				if (val !== parseInt(val)) return val.slice(-2);
				else return '00';
			};
		},
		// 价格整数
		priceInt2() {
			return val => {
				if (val !== parseInt(val)) return val.split('.')[0];
				else return val;
			};
		}
	},
	methods: {
		// 价格整数
		priceInt(val){
			if (val !== parseInt(val)) return val.split('.')[0];
			else return val;
		},
		reloadOrderList(){
			this.orderPage = 0
			this.orderEnd = false
			this.loadStatus = 'loading'
			this.getOrderList(this.tmpIdx)
		},
		// 页面数据
		getOrderList(idx) {
			const that = this
			if (that.orderEnd){
				return
			}
			that.tmpIdx = idx
			that.orderPage++
			that.$api.order.list({
				status:that.getStatusByIdx(idx),
				page:that.orderPage,
				}).then(res => {
				that.orderList = that.orderList.concat(res.list)
				that.next_status_text = res.next_status_text
				that.status_text = res.status_text
				that.photo_base_url = res.photo_base_url
				if (res.page_info.has_more){
					that.loadStatus = 'loadmore'
				} else{
					that.orderEnd = true
					that.loadStatus = 'nomore'
				}
			})
		},
		getStatusByIdx(idx){
			switch (parseInt(idx)){
				case 4:
					return 5;
				case 3:
					return 4;
				case 2:
					return 3;
				case 1:
					return 1;
				default:
					return 0;
			}
		},
		// 总价
		totalPrice(item) {
			let price = 0;
			item.map(val => {
				price += parseFloat(val.sell_price * val.total);
			});
			return this.fenZhuanYuan(price);
		},
		// 总件数
		totalNum(item) {
			let num = 0;
			item.map(val => {
				num += val.total;
			});
			return num;
		},
		fenZhuanYuan(_price){
			return (_price / 100).toFixed(2)
		},
		getNextStatusText(_status){
			if(this.next_status_text[_status]){
				return this.next_status_text[_status]
			} else {
				return '未知'
			}
		},
		getStatusText(_status){
			if(this.status_text[_status]){
				return this.status_text[_status]
			} else {
				return '未知'
			}
		},
		// 根据订单状态跳转下一个功能
		gotoNext(_orderId,_status){
			console.log('-',_orderId,_status)
			if(1 == _status){
				this.$myRouter.push({name:'order/pay',params:{id:_orderId}})
			}
			if(4 == _status){
				this.confirmOrder(_orderId)
			}
		},
		confirmOrder(_orderId){
			const that = this
			uni.showModal({
				content:'确认收货吗？',
				success(e) {
					if (e.confirm === true){
						that.$api.order.submitConfirmOrder({order_id:_orderId}).then(res => {
							that.$u.toast('已收货成功')
							that.orderChangeShow(_orderId,5)
						}).catch(err => {
							that.$u.toast(err.message)
						})
					}
				}
			})
		},
		gotoOrderDetails(_row){
			console.log(_row)
			this.$myRouter.push({name:'member/order_details',params:{id:_row.id}})
		},
		gotoCloseOrder(_orderId){
			this.$myRouter.push({name:'member/order_close',params:{id:_orderId}})
		},
		// 订单数据变更后执行
		orderChangeShow(_orderId,_nextStatus){
			// 如果不是在全部标签，删除数据
			if (this.tmpIdx > 0){
				this.orderList = this.orderList.filter(item => {
					return item.id != _orderId
				})
			} else {
				this.orderList.map(item => {
					if (item.id == _orderId){
						item.status = _nextStatus
					}
				})
			}
		},
		openLogistics(_row){
			this.$myRouter.push({name:'member/order_logistics',params:{id:_row.id}})
			// this.logisticsShow = true
			// this.logisticsOrderNo = _row.order_no
			// this.$nextTick(function(){
			// 	this.$refs['orderLogistics'].getData(_row.id)
			// })
		}
	}
};
</script>
<style lang="scss" scoped>
	@import '@/static/css/member_order_list.scss';
	.page-box{
		padding-bottom: 30rpx;
	}
	.total-price{
		color: #E41F19;
		font-weight: 700;
	}
	.logistics-box{
		// padding: 30rpx 30rpx 0;
		overflow: hidden;
		
		.title{
			font-size: 32rpx;
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
			border: 1px solid #CCC;
		}
	}
</style>
